<template>
  <div class="base-container">
    <div class="topButton">
      <el-button class="Btn" size="small" type="topSubButtom" @click="addAgent">
        <svg-icon icon-class="add" class="buttonSvg"/>
        添加
      </el-button>
      <el-button class="Btn" size="small" type="topSubButtom" @click="deleteAgent('')">
        <svg-icon icon-class="remove" class="buttonSvg"/>
        删除
      </el-button>
    </div>
    <el-table
        :data="tableData"
        height="800"
        empty-text="暂无数据"
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <el-table-column
          type="selection"
          width="50">
      </el-table-column>
      <el-table-column
          prop="agentName"
          align="center"
          label="代理商名称">
      </el-table-column>
      <el-table-column
          prop="agentPrincipal"
          align="center"
          label="代理商负责人">
      </el-table-column>
      <el-table-column
          prop="phoneNumber"
          align="center"
          label="电话号码">
      </el-table-column>
      <el-table-column
          prop="companyAddr"
          align="center"
          label="地址">
      </el-table-column>
      <el-table-column
          prop="createTime"
          align="center"
          label="创建时间">
      </el-table-column>
      <el-table-column
          align="center"
          label="操作">
        <template #default="scope">
          <el-button class="Btn" size="small" type="del" @click="updateaAgent(scope.row)">
            <svg-icon icon-class="edit" class="buttonSvg"/>
          </el-button>
          <el-button class="btn-donate" size="small" type="del" @click="deleteAgent(scope.row.agentId)">
            <svg-icon icon-class="del" class="buttonSvg"/>
          </el-button>
          <el-button class="Btn" size="small" type="del" @click="selAgentUser(scope.row.agentId)">
            <svg-icon icon-class="principal" class="buttonSvg"/>
          </el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <edit-agent-dialog ref="edit_agent_dialog"/>
    <agent-user-diaolg ref="agent_user_diaolg"/>
  </div>
</template>
<script>
import EditAgentDialog from "@/views/agent/components/EditAgentDialog.vue";
import AgentUserDiaolg from "@/views/agent/components/AgentUserDiaolg.vue";

let me;
export default {
  name: "AgentUserManagementListView",
  components: {AgentUserDiaolg, EditAgentDialog},
  created() {
    this.dataQuery();
  },
  methods: {
    dataQuery() {
      me = this;
      me.$post("agent", {
        actionType: 'agentQuery',
        searchText: this.searchText
      }, function (response) {
        if (response.success) {
          me.tableData = response.data;
        } else {
          me.$message.error(response.message);
        }
      });
    },
    addAgent() {
      this.$refs.edit_agent_dialog.showDialog();
    },
    updateaAgent(agentId) {
      this.$refs.edit_agent_dialog.showDialog(agentId);
    },
    selAgentUser(row) {
      this.$refs.agent_user_diaolg.showDialog(row);
    },
    handleSelectionChange(val) {
      this.selected = val;
    },
    deleteAgent(id) {
      if (id == '') {
        if (me.selected.length <= 0) {
          me.$message.warning('请先选择需要删除的代理商')
          return;
        }
      }
      this.$confirm("是否删除所选代理商?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "confirm"
      })
          .then(async () => {
            try {
              let response = await this.$asyncPost("agent", {
                actionType: "agentDelete",
                agentIdList: id != '' ? [id] : this.selected.map(item => item.agentId)
              });
              if (response.success) {
                this.$message.success("删除成功");
                this.dataQuery(); // 重新获取数据以更新列表
              } else {
                this.$message.error(response.message);
              }
            } catch (error) {
              this.$message.error("删除发生错误");
            }
          })
          .catch(() => {
            this.$message.info("取消");
          })
    }
  },
  data() {
    return {
      tableData: [],
      selected: [],
      searchText: ''
    };
  }
};
</script>

<style lang="scss" scoped>

.agent-user-management-list {
  .user-toolbar {
    height: 50px;
    background-color: #42475a;
    margin-bottom: 5px;

    .input-with-select {
      width: 300px;
      margin-right: 30px;
      margin-top: 5px;
      float: right;
    }
  }

  .edit-Table {
    cursor: pointer;
    color: #1cceff;
    font-size: 18px;

    &:hover {
      .card-panel-icon-wrapper {
        color: #110044;
      }

      color: #00d21c;
      font-size: 20px;
    }
  }
}

</style>